import { useMobxStore } from '@/mobx/store';
import { useRequest } from 'ahooks';
import { observer } from 'mobx-react';
import React, { FC, useEffect } from 'react'
import { Ajax } from './../../api/api';
import {
    GithubFilled,
    InfoCircleFilled,
    PlusCircleFilled,
    QuestionCircleFilled,
    SearchOutlined,
} from '@ant-design/icons';
import type { ProSettings } from '@ant-design/pro-components';
import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
import { Input, Layout } from 'antd';
import { useState } from 'react';
import defaultProps from './defaultProps'
import MyFoot from './MyFoot';
import MyHead from './MyHead';
import MyMenu from './MyMenu';
import MyBao from './MyBao';
const { Header, Footer, Sider, Content } = Layout;
const MainIndex: FC<any> = (props) => {
    const { MyData } = useMobxStore()
    const { userInfo, changeUserInfo, getRoleListAsync } = MyData
    const { loading, run } = useRequest(Ajax.getuserinfo, {
        manual: true,
        onSuccess: (res: any, params) => {
            changeUserInfo(res.result)
            getRoleListAsync()
        },
        onError: (error) => {

        },
    });
    useEffect(() => {
        run({
            id: '123'
        })
    }, [])
    const settings: ProSettings | undefined = {
        fixSiderbar: true,
        layout: 'mix',
        splitMenus: true,
    };



    return (
        <div
            id="test-pro-layout"
            style={{
                height: '100vh',
            }}
        >
            <Layout style={{ height: '100vh' }}>
                <MyMenu />
                <Layout>
                    <MyHead />

                    <Content style={{ padding: 15, display: 'flex', flexDirection: 'column', height: '100%' }}>
                        <MyBao />
                        <div style={{ flex: 1, paddingTop: 15, }}>
                            {props.children}
                        </div>
                    </Content>
                    <MyFoot />
                </Layout>
            </Layout>
        </div>
    );
};

export default observer(MainIndex)
